<template>
  <el-cascader
    popper-class="popperStyle"
    v-model="cascader"
    :options="categoryOptions"
    :props="props.defaultProps"
    :show-all-levels="props.showAllLevels"
    collapse-tags
    :clearable="props.clearable"
    :placeholder="props.placeholder"
    @change="change"
    v-bind="$attrs"
  />
</template>
<script setup>
import useCommonStore from "@/store/modules/common";
import { onMounted, toRaw } from "vue";
const commonStore = useCommonStore();
const categoryOptions = computed(() => {
  return commonStore.categoryOptions || [];
});

const props = defineProps({
  modelValue: [String, Number, Array],
  placeholder: {
    type: String,
    default: "请选择",
  },
  defaultProps: {
    type: Object,
    default: {
      children: "son",
      label: "name",
      value: "id",
    },
  },
  showAllLevels: {
    type: Boolean,
    default: false,
  },
  clearable: {
    type: Boolean,
    default: true,
  },
});

const cascader = computed({
  get: () => {
    return props.modelValue || [];
  },
  set: (val) => {
    emit("update:modelValue", val);
  },
});

const emit = defineEmits(["update:modelValue", "change"]);
const change = (val) => {
  emit("change", val || "");
};

onMounted(() => {
  if (!commonStore.categoryOptions) {
    commonStore.getColumnsList();
  }
});
</script>
